// import { BasciConnect } from 'components/ConnectWallet'
import 'babel-polyfill'
import Header from '@/components/Header'
import { BEP_ABI } from '@/web3/contract/bep20'
import { Box, Text } from '@chakra-ui/react'
import { Button, Modal, Spin } from 'antd'
import type { NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { useAccount, useConnect, useContractRead, useEnsName, useSignMessage } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'


const Home: NextPage = () => {
  const router = useRouter()
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(false)
  const { address, isConnected, isDisconnected }: Account = useAccount();
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });

  const { t } = useTranslation();

  // 手动添加mate标签
  const addMeta = (name: string, content: string) => {
    const meta = document.createElement('meta');
    meta.content = content;
    meta.name = name;
    document.getElementsByTagName('head')[0].appendChild(meta);
  };

  // // 禁用缩放
  useEffect(() => {
    addMeta(
      'viewport',
      'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover',
    );
  }, [])

  useEffect(() => {
    // 初始化先确认绑定邀请
    connect()
    if (address) {
      //更新地址
      dispatch({ type: 'ADDRESS', payload: address })
      setLoading(false)
      // 刷新有重复调用的问题
      if (router.pathname === '/') {
        router.push('/product')
      }
    }
  }, [address])


  return (
    <div>
      <Head>
        <title>Blo Fund</title>
        <meta name="description" content="Generated by create next wagmi dapp" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
        <link rel="icon" href="/favicon.ico" />
        {/* <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"> </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-sham.min.js"> </script>
        <script src="/Public/js/lib/react/polyfill.min.js"></script> */}
      </Head>
      {/* 没连接钱包提示按钮 */}
      {isDisconnected && (
        <div style={{ display: 'flex', width: '100%', flexDirection: 'column', alignItems: 'center', justifyItems: 'center' }}>
          <p>{t('modal.connect_wallet')}</p>
          <Spin spinning={loading} >
            <Button type="primary"
              style={{
                margin: '8px 20px 15px',
                flex: 1,
                width: '140px',
                height: '40px',
                fontSize: '18px',
                fontWeight: '600',
                backgroundColor: '#375BE2',
              }}
              onClick={() => { connect(); setLoading(true) }}>{t('modal.connect')}
            </Button>
          </Spin>
        </div>
      )}


    </div>
  )
}

export default Home
